/*
 * @Author: xiehangyun 
 * @Date: 2025-02-24 13:21:23 
 * @Last Modified by: xiehangyun
 * @Last Modified time: 2025-02-27 18:38:45
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./addBgModal.module.less";
import { Button, Modal, Pagination, Select, Tooltip } from "antd";
import addBgModalStore from "./addBgModalStore";
import utils from "@/utils/utils";
import vipPNG from "./img/vip.png";
import { CloseCircleOutlined, CloseOutlined, QuestionCircleOutlined } from "@ant-design/icons";
import undoPNG from "./img/undo.png";
import redoPNG from "./img/redo.png";
import fillcolorPNG from "./img/fillcolor.png";
import fillPNG from "./img/fill.png";
import adaptPNG from "./img/adapt.png";
import stretchPNG from "./img/stretch.png";
import clsx from "clsx";
import addBgModalRender from "./addBgModalRender";
import { SketchPicker } from "react-color";
import ColorPick from "@/editorComponent/RightMenu/ColorPick/ColorPick";
import ColorFill from "./ColorFill/ColorFill";


interface Iprops {
  children?: ReactNode
}

// 添加背景弹窗
export default function AddBgModal() {

  const mockupAndBg = useRef<HTMLCanvasElement | null>(null);
  const [open, setOpen] = useState(false);
  const [mockuplist, setMockuplist] = useState<Array<string>>([]);
  const [currentMockup, setCurrentMockup] = useState("");
  const [sceneType, setSceneType] = useState("indoor");
  const [current, setCurrent] = useState(1);
  const [bgtype, setBgtype] = useState(2);
  const [bglist, setBglist] = useState<Array<{ id: number, picPath: string }>>([]);
  const [total, setTotal] = useState(0);
  const [currentBg, setCurrentBg] = useState<string>("");

  useEffect(() => {
    addBgModalStore.setCurrent(1);
  }, []);

  useEffect(() => autorun(() => {
    setOpen(addBgModalStore.open);
    setMockuplist(addBgModalStore.mockuplist);
    setCurrentMockup(addBgModalStore.currentMockup);
    addBgModalRender.setCurrentBgImg(addBgModalStore.currentMockup);
    setCurrent(addBgModalStore.current);
    setBgtype(addBgModalStore.bgtype);
    setBglist(addBgModalStore.bglist);
    setTotal(addBgModalStore.total);
    setCurrentBg(addBgModalStore.currentBg);
  }, { delay: 30 }), []);


  //确认
  const onOk = () => {
    addBgModalStore.setOpen(false);
  }

  //取消
  const onCancel = () => {
    addBgModalStore.setOpen(false);
  }

  //下载
  const download = () => {
    addBgModalRender.download();
  }

  return (
    <Modal
      open={open}
      title="批量更改背景"
      maskClosable={false}
      onCancel={onCancel}
      centered
      className={styles.addBgModal}
      footer={null}
      width={1160}
    >
      <div>
        <div className={styles.left} >
          {
            mockuplist.map((item, index) => {
              return (
                <div
                  key={index}
                  className={clsx(styles.mockUpitem, currentMockup === item && styles.active)}
                  onClick={() => {
                    addBgModalStore.setCurrentMockup(item, index);
                  }}
                >
                  {/* 自定义 */}
                  <img src={utils.ossSuffix(item, 140)} alt="" />
                </div>
              )
            })
          }
        </div>
        <div className={styles.center} >
          <canvas
            width={1024}
            height={1024}
            ref={dom => addBgModalRender.setPerCanvas(dom)}
          />
        </div>
        <div className={styles.right} >
          自定义场景图
          <Button.Group className={styles.button} >
            <Button
              onClick={() => addBgModalStore.setBgtype(2)}
              type={"default"}
              className={clsx(bgtype === 2 && styles.active)}
            >官方场景</Button>
            <Button
              onClick={() => addBgModalStore.setBgtype(1)}
              type={"default"}
              className={clsx(bgtype === 1 && styles.active)}
            >
              上传
              <img
                alt=""
                src={vipPNG}
                className={styles.vip}
              />
              <Tooltip
                title="此功能仅对VIP用户开放"
                placement="bottom"
                overlayClassName={styles.customTip}
              >
                <QuestionCircleOutlined />
              </Tooltip>
            </Button>
          </Button.Group>

          {
            bgtype === 1 &&
            <Button block
              type="primary"
              onClick={() => addBgModalStore.uploadBg()}
            >上传</Button>
          }

          {/* 
            暂时取消室内室外的选择
            <Select
              defaultValue={sceneType}
              style={{ width: 340, marginTop: 10 }}
              onChange={(sceneType) => setSceneType(sceneType)}
            >
              <Select.Option value="indoor">室内场景</Select.Option>
              <Select.Option value="outdoor">室外场景</Select.Option>
            </Select> 
          */}

          <div className={clsx(styles.backgroundList, bgtype === 2 && styles.systemBg)} >
            {
              bglist.map((item, index) => {
                return (
                  <div
                    key={index}
                    className={clsx(styles.backgroundItem, currentBg === item.picPath && styles.active)}
                  >
                    {
                      bgtype === 1 &&
                      <CloseCircleOutlined
                        className={styles.closeIcon}
                        onClick={() => {
                          addBgModalStore.deleteBg(item.id);
                        }}
                      />
                    }
                    <img
                      key={index}
                      src={utils.ossSuffix(item.picPath, 74)}
                      alt=""
                      className={styles.backgroundImg}
                      onClick={() => {
                        addBgModalStore.setCurrentBg(item.picPath);
                        addBgModalRender.setBgImage(item.picPath);
                      }}
                    />
                  </div>
                )
              })
            }
          </div>
          <div className={styles.list_info} >
            <Pagination
              size="small"
              simple
              current={current}
              total={total}
              pageSize={8}
              showTotal={(total) => `共${total}条`}
              onChange={(page) => {
                addBgModalStore.setCurrent(page);
              }}
              className={styles.pagination}
              showSizeChanger={false}
            />

          </div>

          <div className={styles.btns} >
            <span
              className={styles.btn}
              onClick={() => {
                addBgModalRender.undo();
              }}
            >
              <img className={styles.icon} src={undoPNG} alt="" />
            </span>
            <span
              className={styles.btn}
              onClick={() => {
                addBgModalRender.redo();
              }}
            >
              <img className={styles.icon} src={redoPNG} alt="" />
            </span>
            {/* 颜色填充组件 */}
            <ColorFill
              colorChange={(color) => {
                addBgModalRender.setBgColor(color);
              }}
              onOpenChange={(visible) => {
                if (!visible) {
                  addBgModalRender.recordHistory();
                }
              }}
            />
          </div>

          <div
            className={styles.previewBg}
            ref={dom => addBgModalRender.setContainer(dom)}
          >
          </div>

          <div className={styles.btns} >
            <span
              className={styles.btn}
              onClick={() => {
                addBgModalRender.fill();
              }}
            >
              <img className={styles.icon} src={fillPNG} alt="" />
              填充
            </span>
            <span
              className={styles.btn}
              onClick={() => {
                addBgModalRender.fit();
              }}
            >
              <img className={styles.icon} src={adaptPNG} alt="" />
              适应
            </span>
            <span
              className={styles.btn}
              onClick={() => {
                addBgModalRender.stretch();
              }}
            >
              <img className={styles.icon} src={stretchPNG} alt="" />
              拉伸
            </span>
          </div>
        </div>

        <div className={styles.btns} >
          <Button onClick={onCancel} >关闭</Button>
          &nbsp;&nbsp;
          <Button
            // onClick={onOk}
            onClick={download}
            type="primary"
          >下载</Button>
        </div>
      </div>
    </Modal>
  );
}